<template>
  <view>
    <view class="back"></view>

    <view class="header"
          ref="header"
    >
      <view :style="{height: statusBarHeight + 'px'}"></view>
      <view class="header-title">全部等级</view>
    </view>

    <view :style="{height: statusBarHeight + 'px'}"></view>
    <view style="height: 44px"></view>

    <view class="box">
      <view class="box-title">全部技能等级</view>
      <view class="split-height"></view>
      <view>
        <u-grid col="3">
          <u-grid-item
              @click="goToSkillDetail(item.id)"
              v-for="(item, index) in skillLevelList"
          >
            <view class="in-box">
              <view>
                <image
                    :src="$kt.file.visit(item.fileIdOfIcon)"
                    mode="aspectFit"
                    class="box-icon"
                ></image>
              </view>
              <view class="box-text">{{ item.name }}</view>
            </view>
          </u-grid-item>
        </u-grid>
      </view>
    </view>


    <view class="box">
      <view class="box-title">全部职称等级</view>
      <view class="split-height"></view>
      <view>
        <u-grid col="3">
          <u-grid-item
              @click="goToTitleDetail(item.id)"
              v-for="(item, index) in titleLevelList"
          >
            <view class="in-box">
              <view>
                <image
                    :src="$kt.file.visit(item.fileIdOfIcon)"
                    mode="aspectFit"
                    class="box-icon"
                ></image>
              </view>
              <view class="box-text">{{ item.name }}</view>
            </view>
          </u-grid-item>
        </u-grid>
      </view>
    </view>


    <view class="box">
      <view class="box-title">全部专家人才等级</view>
      <view class="split-height"></view>
      <view>
        <u-grid col="3">
          <u-grid-item
              @click="goToTalentDetail(item.id)"
              v-for="(item, index) in expertTalentLevelList"
          >
            <view class="in-box">
              <view>
                <image
                    :src="$kt.file.visit(item.fileIdOfIcon)"
                    mode="aspectFit"
                    class="box-icon"
                ></image>
              </view>
              <view class="box-text">{{ item.name }}</view>
            </view>
          </u-grid-item>
        </u-grid>
      </view>
    </view>

    <view style="height: 100rpx"></view>

  </view>
</template>

<script>
import emp from '@/js/emp.js';

export default {
  props: {
    mineInfo: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      // 状态栏高度
      statusBarHeight: 0,
      // 技能等级列表
      skillLevelList: [],
      // 职称等级列表
      titleLevelList: [],
      // 专家人才等级列表
      expertTalentLevelList: [],
      // 头部高度
      headerHeight: 0,
      //职称系列名称
      titleLevelName: ""

    };
  },
  mounted() {
    // 设置状态颜色为白色
    uni.setNavigationBarColor({
      frontColor: '#ffffff',
    });
    // 获取状态栏高度
    this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
    // 获取头部高度
    uni.createSelectorQuery().in(this).select('.header').boundingClientRect((data) => {
      this.headerHeight = data.height;
      this.getAll();
    }).exec();
  },
  watch: {
    'mineInfo': function () {
      this.getAll();
    }
  },
  methods: {
    getAll() {
      // 获取所有技能等级
      this.getAllSkillLevel();
      // 获取所有职称等级
      this.getAllTitleLevel();
      // 获取所有专家人才等级
      this.getAllExpertTalentLevel();
    },
    /**
     * 获取所有技能等级
     */
    getAllSkillLevel() {
      uni.showLoading({
        title: '加载中....'
      });
      this.$requestSecurity({
        uri: "/skillLevel/getAll",
        data: {},
        stateSuccess: (res) => {
          this.skillLevelList = res.data;
          console.log("转换后的技能等级列表", this.skillLevelList)
          uni.hideLoading();

        },
        stateFail: (res) => {
        }
      });
    },
    /**
     * 获取所有职称等级
     * /titleLevel/getAll
     */
    getAllTitleLevel() {
      uni.showLoading({
        title: '加载中....'
      });
      this.$requestSecurity({
        uri: "/titleLevel/getAll",
        data: {},
        stateSuccess: (res) => {
          this.titleLevelList = res.data;
          // this.titleLevelName = this.titleLevelList[0].series.name;
          uni.hideLoading();
        },
        stateFail: (res) => {
        }
      });
    },
    /**
     * 获取所有专家人才等级
     * /expertTalentLevel/getAll
     */
    getAllExpertTalentLevel() {
      uni.showLoading({
        title: '加载中....'
      });
      this.$requestSecurity({
        uri: "/expertTalentLevel/getAll",
        data: {},
        stateSuccess: (res) => {
          this.expertTalentLevelList = res.data;
          uni.hideLoading();
        },
        stateFail: (res) => {
        }
      });
    },
    /**
     * 跳转到技能详情
     */
    goToSkillDetail(id) {
      //uni 跳转详情页
      uni.navigateTo({
        url: `/pages/level/skillDetail/skillDetail?id=${id}`
      });
    },
    /**
     * 跳转到职称详情
     */
    goToTitleDetail(id) {
      //uni 跳转详情页
      uni.navigateTo({
        url: `/pages/level/title/title?id=${id}`
      });
    },
    /**
     * 跳转到专家人才详情
     */
    goToTalentDetail(id) {
      //uni 跳转详情页
      uni.navigateTo({
        url: `/pages/level/talent/talent?id=${id}`
      });
    }

  }
}
</script>

<style lang="scss" scoped>
.header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 999;
  color: #000000;
  background: linear-gradient(135deg, #0B8D80 0%, #1EC4B4 100%);
}

.back {
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: #F5F5F5;
  top: 0;
  left: 0;
  z-index: -1;
}

.box {
  padding: 30rpx;
  box-sizing: border-box;
  text-align: center;
}

.box-title {
  font-size: 24rpx;
  color: #333333;
  text-align: left;
  font-weight: bold;
}

.split-height {
  height: 20rpx;
}

.box-icon {
  width: 70rpx;
  height: 70rpx;
}

.box-text {
  font-size: 24rpx;
  color: #333333;
  margin-top: 10rpx;
  //超出部分隐藏
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.in-box {
  background-color: #FFFFFF;
  width: calc(100% - 40rpx);
  padding: 20rpx;
  box-sizing: border-box;
  border-radius: 20rpx;
  margin: 20rpx 20rpx 20rpx 0;
  text-align: center;
}

.header-title {
  height: 44px;
  line-height: 44px;
  text-align: center;
  font-size: 36rpx;
  color: #ffffff;
}
</style>
